<template>
  <div>
      <el-container>
        <el-header height="60px">
          <el-row>
            <div style="margin: 0 160px">
            <el-col :span="6">
              <span>BUCTCODER</span>
            </el-col>
            </div>
            <el-col :span="3">
              <i class="el-icon-message"></i>
              <el-button type="text" @click="message">学生基本信息</el-button>
            </el-col>
            <el-col :span="3">
              <i class="el-icon-document"></i>
              <el-button type="text" @click="tongji">近期比赛统计</el-button>
            </el-col>
            <el-col :span="5">
              <i class="el-icon-data-line"></i>
              <el-button type="text" @click="rank">各类排行榜单</el-button>
            </el-col>
            <el-col :span="5">
            <el-button type="info" plain @click="denglu">登录</el-button>
            <el-button type="primary" @click="zhuce">注册</el-button>
            </el-col>
          </el-row>
        </el-header>

        <el-container style="height: 659px; border: 1px solid #eee">
          <el-aside style="width: 160px; background-color: #ffffff">
          </el-aside>
        <el-main>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
              <el-input placeholder="根据学号搜索" v-model="form.stuid"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="根据姓名搜索" v-model="form.stuname"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="根据班级搜索" v-model="form.stuclass"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="根据atcoder账号搜索" v-model="form.stuAcid"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="根据codeforces账号搜索" v-model="form.stuCfid"></el-input>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
          </el-form>
          <el-table ref="multipleTable" :data="tableData" highlight-current-row  border tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="stuid" label="学号"></el-table-column>
            <el-table-column prop="stuname" label="姓名"></el-table-column>
            <el-table-column prop="stuclass" label="班级"></el-table-column>
            <el-table-column prop="stuAcid" label="atcoder账号">
              <template slot-scope="scope">
                <router-link :to="{path:'/Acid2',query:{id:scope.row.stuAcid}}">{{scope.row.stuAcid}}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="stuCfid" label="codeforces账号1">
              <template slot-scope="scope">
                <router-link :to="{path:'/Cfid2',query:{id:scope.row.stuCfid}}">{{scope.row.stuCfid}}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="stuCfid1" label="codeforces账号2">
              <template slot-scope="scope">
                <router-link :to="{path:'/Cfid2',query:{id:scope.row.stuCfid1}}">{{scope.row.stuCfid1}}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="stuCfid2" label="codeforces账号3">
              <template slot-scope="scope">
                <router-link :to="{path:'/Cfid2',query:{id:scope.row.stuCfid2}}">{{scope.row.stuCfid2}}</router-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="prev, pager, next,  sizes, total, jumper"
              :total="total"
          ></el-pagination>
        </el-main>
          <el-aside style="width: 160px; background-color: #ffffff">
          </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "homepage",
  data() {
    return {
      form:{},
      pageIsOrNot: false,
      tableData: [],
      pageNum: 1,//当前加载的page
      pageSize: 10,//当前的limit
      total: 0//后台返回的总页数
    };
  },
  created(){
    this.initTable()//页面初始加载
  },
  methods: {
    message(){
      this.$router.push("/homepage")
    },
    tongji(){
      this.$router.push("/recent2")
    },
    rank(){
      this.$router.push("/atcoderrank2")
    },
    denglu(){
      this.$router.push("/")
    },
    zhuce(){
      this.$router.push("/register")
    },
    handleCurrentChange(val) {
      this.pageNum = val; //val可以获取当前用户选择的页码数
      if(this.pageIsOrNot){
        this.search();
      }
      else{
        this.initTable();
      }
    },
    //每页显示的条数大小改变时触发的方法
    handleSizeChange(val) {
      this.pageSize = val;//获取用户想要每页显示的条数
      if(this.pageIsOrNot){
        this.search();
      }
      else{
        this.initTable();
      }
    },
    search(){
      if(!this.pageIsOrNot){
        this.pageNum=1;
      }
      this.$axios.post("/student/page/query", {
        stuid: this.form.stuid,
        stuname: this.form.stuname,
        stuclass: this.form.stuclass,
        stuAcid: this.form.stuAcid,
        stuCfid: this.form.stuCfid,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      })
          .then(response => {
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
          })
      this.pageIsOrNot = true;
    },
    initTable() {
      this.pageIsOrNot = false;
      this.$axios.post("/student/page/query", {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      })
          .then(response => {
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
          })
    }
  }
}
</script>
<style>
.el-header {
  background-color: #F5F5F5;
  color: #333;
  line-height: 60px;
}
</style>